<template>
  <div class="main-body">
    <el-button type="primary" @click="dialogVisible = true">
    新增文章
  </el-button>

  <el-dialog v-model="dialogVisible" :title="dialog_title" width="500px" :before-close="handleClose">
    <el-form :model="article_info" label-width="120px">
      <el-form-item label="文章标题">
        <el-input v-model="article_info.title" />
      </el-form-item>
      <el-form-item label="文章描述">
        <el-input v-model="article_info.description" />
      </el-form-item>
      <el-form-item label="文章内容">
        <el-input v-model="article_info.body"/>
      </el-form-item>
      <el-form-item label="文章标签">
        <el-input v-model="article_info.tagList"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="add_article">提交</el-button>
      </span>
    </template>
  </el-dialog>
  <el-table :data="pageDataInfo.tableData" border style="width: 100%">
      <el-table-column prop="slug" label="ID" :showOverflowTooltip="true" />
      <el-table-column prop="title" label="标题" :showOverflowTooltip="true" />
      <el-table-column prop="description" label="描述" :showOverflowTooltip="true" />
      <el-table-column prop="createdAt" label="发布时间" />
      <el-table-column prop="author.username" label="作者" />
      <el-table-column prop="tagList" label="标签">
        <template #default="scope">
          <el-tag v-for="(item,index) in scope.row.tagList" :key="index">
            {{ item }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >Edit</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button
        >
      </template>
    </el-table-column>

    </el-table>
    <div class="xia">
      <el-pagination v-model:currentPage="pageDataInfo.pageIndex" v-model:page-size="pageDataInfo.pageSize"
      :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next" :total="pageDataInfo.total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    
  </div>
  
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {Article, ArticleSearchParam, CreateArticle} from '@/types'
import axios from '@/utils/request';
import {useUserStore} from '@/store/user'
import { storeToRefs } from 'pinia';
import { ElMessage, ElMessageBox } from 'element-plus';

const dialog_title = ref('新增文章')
const dialogVisible = ref(false)
const article_info = ref<CreateArticle>({
  title:'',
  description:'',
  body:'',
  tagList:[]
})
interface PageDataInfo {
  tableData: Article[];
  pageSize: number;
  pageIndex: number;
  total: number;
}

const pageDataInfo = ref<PageDataInfo>({
  tableData: [],
  pageIndex: 1,
  pageSize: 10,
  total: 0
})

const handleEdit = (index:number, article:any) => {
  axios.get(`articles/${article.slug}`).then(res=>{
    article_info.value = res.data.article
    dialogVisible.value = true
    dialog_title.value = '编辑文章'
  })
}
const handleDelete = (index:number, article:any) => {
  ElMessageBox.confirm(
    '确实要删除该文章么?',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
      center: true,
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })

      axios.delete(`articles/${article.slug}`).then(res=>{
        get_articles(pageDataInfo.value.pageIndex, pageDataInfo.value.pageSize)
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}
const handleSizeChange = (val: number) => {
  pageDataInfo.value.pageSize = val
  get_articles(pageDataInfo.value.pageIndex, pageDataInfo.value.pageSize)
}

const handleCurrentChange = (val: number) => {
  pageDataInfo.value.pageIndex = val
  get_articles(pageDataInfo.value.pageIndex, pageDataInfo.value.pageSize)
}
const get_articles = (pageIndex: number, pageSize: number) => {
  const userStore = useUserStore()
  const { userInfo } = storeToRefs(userStore)
  const article_search_param: ArticleSearchParam = {
    limit: pageSize,
    offset: (pageIndex - 1) * pageSize
  }
  article_search_param.author = userInfo.value?.username
  axios.get('/articles', { params: article_search_param }).then(res => {
    pageDataInfo.value.tableData = res.data.articles
    pageDataInfo.value.total = res.data.articlesCount
  })
}
const add_article = () => {
  axios.post('/articles',{article:article_info.value}).then(res=>{
    console.log(res.data.article);
    get_articles(pageDataInfo.value.pageIndex, pageDataInfo.value.pageSize)
  })
  dialogVisible.value = false
  article_info.value.title = ''
  article_info.value.body = ''
  article_info.value.description = ''
  article_info.value.tagList = []
}

const handleClose = () => {
  dialogVisible.value = false
}

get_articles(pageDataInfo.value.pageIndex, pageDataInfo.value.pageSize)
</script>
<style scoped>
.main-body {
  padding: 16px 16px 30px;
  overflow: auto;
  height: 100%;
  box-sizing: border-box;
}
.main-body .xia{
  margin-top: 20px;
    float: right;
}
</style>
